<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>《Flutter个人资料界面应用》 - 飞雪无情的博客</title><meta name="Description" content="专注于IT互联网，包括但不限于Go语言(golang)、Java、Android、Python、项目管理、抖音分析、软件架构等"><meta property="og:title" content="《Flutter个人资料界面应用》" />
<meta property="og:description" content="
本文我将向您展示如何在 flutter 中制作个人资料页面的 UI，您将学习如何制作圆形按钮以及如何在 flutter 中制作渐变色。
" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.flysnow.org/posts/flutter/Flutter%E4%B8%AA%E4%BA%BA%E8%B5%84%E6%96%99%E7%95%8C%E9%9D%A2%E5%BA%94%E7%94%A8/" />
<meta property="article:published_time" content="2021-07-16T20:06:37+08:00" />
<meta property="article:modified_time" content="2021-07-16T20:06:37+08:00" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="《Flutter个人资料界面应用》"/>
<meta name="twitter:description" content="
本文我将向您展示如何在 flutter 中制作个人资料页面的 UI，您将学习如何制作圆形按钮以及如何在 flutter 中制作渐变色。
"/>
<meta name="application-name" content="飞雪无情的博客">
<meta name="apple-mobile-web-app-title" content="飞雪无情的博客"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://www.flysnow.org/posts/flutter/Flutter%E4%B8%AA%E4%BA%BA%E8%B5%84%E6%96%99%E7%95%8C%E9%9D%A2%E5%BA%94%E7%94%A8/" /><link rel="prev" href="https://www.flysnow.org/posts/flutter/%E5%9C%A8Flutter%E4%B8%AD%E7%9A%84%E5%BC%80%E5%8F%91%E5%B0%8F%E6%8A%80%E5%B7%A73/" /><link rel="next" href="https://www.flysnow.org/posts/flutter/%E5%9C%A8Flutter%E5%92%8CandroidStudio%E4%B8%AD%E5%88%B6%E4%BD%9C%E7%99%BB%E5%BD%95%E8%A1%A8%E5%8D%95/" /><link rel="stylesheet" href="/lib/normalize/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="/lib/fontawesome-free/all.min.css"><link rel="stylesheet" href="/lib/animate/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "《Flutter个人资料界面应用》",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/www.flysnow.org\/posts\/flutter\/Flutter%E4%B8%AA%E4%BA%BA%E8%B5%84%E6%96%99%E7%95%8C%E9%9D%A2%E5%BA%94%E7%94%A8\/"
        },"genre": "posts","keywords": "flutter, 个人资料","wordcount":  615 ,
        "url": "https:\/\/www.flysnow.org\/posts\/flutter\/Flutter%E4%B8%AA%E4%BA%BA%E8%B5%84%E6%96%99%E7%95%8C%E9%9D%A2%E5%BA%94%E7%94%A8\/","datePublished": "2021-07-16T20:06:37+08:00","dateModified": "2021-07-16T20:06:37+08:00","publisher": {
            "@type": "Organization",
            "name": "飞雪无情"},"author": {
                "@type": "Person",
                "name": "飞雪无情"
            },"description": ""
    }
    </script></head>
    <body header-desktop="" header-mobile=""><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><div class="logo-wrapper">
  <a href="/%20/" class="logo">飞雪无情的博客</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
      <a class="menu-item-link" href="/tools/">工具</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/archives/">归档</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/about/">关于</a>
    </li>
  </ul>
</nav><main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">Contents</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">《Flutter个人资料界面应用》</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel=" author" class="author"><i class="fas fa-user-circle fa-fw"></i>飞雪无情</a></span>&nbsp;<span class="post-category">included in <a href="/categories/Flutter/"><i class="far fa-folder fa-fw"></i>Flutter</a>&nbsp;<a href="/categories/%E4%B8%AA%E4%BA%BA%E8%B5%84%E6%96%99/"><i class="far fa-folder fa-fw"></i>个人资料</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-07-16">2021-07-16</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;615 words&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;2 minutes&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        title="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png" /></div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>Contents</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents"></nav></div>
            </div><div class="content" id="content"><blockquote>
<p>本文我将向您展示如何在 flutter 中制作个人资料页面的 UI，您将学习如何制作圆形按钮以及如何在 flutter 中制作渐变色。</p>
</blockquote>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">  1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">  2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">  3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">  4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">  5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">  6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">  7
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">  8
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">  9
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 10
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 11
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 12
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 13
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 14
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 15
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 16
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 17
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 18
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 19
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 20
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 21
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 22
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 23
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 24
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 25
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 26
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 27
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 28
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 29
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 30
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 31
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 32
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 33
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 34
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 35
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 36
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 37
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 38
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 39
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 40
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 41
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 42
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 43
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 44
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 45
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 46
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 47
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 48
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 49
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 50
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 51
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 52
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 53
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 54
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 55
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 56
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 57
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 58
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 59
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 60
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 61
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 62
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 63
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 64
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 65
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 66
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 67
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 68
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 69
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 70
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 71
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 72
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 73
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 74
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 75
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 76
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 77
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 78
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 79
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 80
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 81
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 82
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 83
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 84
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 85
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 86
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 87
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 88
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 89
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 90
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 91
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 92
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 93
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 94
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 95
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 96
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 97
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 98
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 99
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">100
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">101
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">102
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">103
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">104
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">105
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">106
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">107
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">108
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">109
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">110
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">111
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">112
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">113
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">114
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">115
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">116
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">117
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">118
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">119
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">120
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">121
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">122
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">123
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">124
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">125
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">126
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">127
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">128
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">129
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">130
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">131
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">132
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">133
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">134
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">135
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">136
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">137
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">138
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">139
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">140
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">141
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">142
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">143
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">144
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">145
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">146
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">147
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">148
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">149
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">150
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">151
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">152
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">153
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">154
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">155
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">156
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">157
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">158
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">159
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">160
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">161
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">162
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">163
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">164
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">165
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">166
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">167
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">168
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">169
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">170
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">171
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">172
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">173
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">174
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">175
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">176
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">177
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">178
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">179
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">180
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">181
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">182
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">183
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">184
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">185
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">186
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">187
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">188
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">189
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">190
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">191
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">192
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">193
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">194
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">195
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">196
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">197
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">198
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">199
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">200
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">201
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">202
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">203
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">204
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">205
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">206
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">207
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">208
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">209
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">210
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#000;font-weight:bold">import</span> <span style="color:#d14">&#39;package:flutter/material.dart&#39;</span>;

<span style="color:#458;font-weight:bold">void</span> main() <span style="color:#000;font-weight:bold">=&gt;</span> runApp(MaterialApp(
  <span style="color:#900;font-weight:bold">home:</span>ProfileApp(),
));

<span style="color:#000;font-weight:bold">class</span> <span style="color:#458;font-weight:bold">ProfileApp</span> <span style="color:#000;font-weight:bold">extends</span> StatelessWidget {
  <span style="color:#a61717;background-color:#e3d2d2">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#000;font-weight:bold">return</span> Scaffold(
      <span style="color:#900;font-weight:bold">body:</span> Column(
        <span style="color:#900;font-weight:bold">children:</span> <span style="color:#000;font-weight:bold">&lt;</span>Widget<span style="color:#000;font-weight:bold">&gt;</span>[
          Container(
            <span style="color:#900;font-weight:bold">decoration:</span> BoxDecoration(
              <span style="color:#900;font-weight:bold">gradient:</span> LinearGradient(
                <span style="color:#900;font-weight:bold">begin:</span> Alignment.topCenter,
                <span style="color:#900;font-weight:bold">end:</span> Alignment.bottomCenter,
                <span style="color:#900;font-weight:bold">colors:</span> [Colors.redAccent, Colors.pinkAccent]
              )
            ),
            <span style="color:#900;font-weight:bold">child:</span> Container(
              <span style="color:#900;font-weight:bold">width:</span> <span style="color:#458;font-weight:bold">double</span>.infinity,
              <span style="color:#900;font-weight:bold">height:</span> <span style="color:#099">350.0</span>,
              <span style="color:#900;font-weight:bold">child:</span> Center(
                <span style="color:#900;font-weight:bold">child:</span> Column(
                  <span style="color:#900;font-weight:bold">crossAxisAlignment:</span> CrossAxisAlignment.center,
                  <span style="color:#900;font-weight:bold">mainAxisAlignment:</span> MainAxisAlignment.center,
                  <span style="color:#900;font-weight:bold">children:</span> <span style="color:#000;font-weight:bold">&lt;</span>Widget<span style="color:#000;font-weight:bold">&gt;</span>[
                    CircleAvatar(
                      <span style="color:#900;font-weight:bold">backgroundImage:</span> NetworkImage(
                        <span style="color:#d14">&#34;https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg.jpg&#34;</span>,
                      ),
                      <span style="color:#900;font-weight:bold">radius:</span> <span style="color:#099">50.0</span>,
                    ),
                    SizedBox(
                      <span style="color:#900;font-weight:bold">height:</span> <span style="color:#099">10.0</span>,
                    ),
                    Text(
                      <span style="color:#d14">&#34;Alice James&#34;</span>,
                      <span style="color:#900;font-weight:bold">style:</span> TextStyle(
                        <span style="color:#900;font-weight:bold">fontSize:</span> <span style="color:#099">22.0</span>,
                        <span style="color:#900;font-weight:bold">color:</span> Colors.white,
                      ),
                    ),
                    SizedBox(
                      <span style="color:#900;font-weight:bold">height:</span> <span style="color:#099">10.0</span>,
                    ),
                    Card(
                      <span style="color:#900;font-weight:bold">margin:</span> EdgeInsets.symmetric(<span style="color:#900;font-weight:bold">horizontal:</span> <span style="color:#099">20.0</span>,<span style="color:#900;font-weight:bold">vertical:</span> <span style="color:#099">5.0</span>),
                      <span style="color:#900;font-weight:bold">clipBehavior:</span> Clip.antiAlias,
                      <span style="color:#900;font-weight:bold">color:</span> Colors.white,
                      <span style="color:#900;font-weight:bold">elevation:</span> <span style="color:#099">5.0</span>,
                      <span style="color:#900;font-weight:bold">child:</span> Padding(
                        <span style="color:#900;font-weight:bold">padding:</span> <span style="color:#000;font-weight:bold">const</span> EdgeInsets.symmetric(<span style="color:#900;font-weight:bold">horizontal:</span> <span style="color:#099">8.0</span>,<span style="color:#900;font-weight:bold">vertical:</span> <span style="color:#099">22.0</span>),
                        <span style="color:#900;font-weight:bold">child:</span> Row(
                          <span style="color:#900;font-weight:bold">children:</span> <span style="color:#000;font-weight:bold">&lt;</span>Widget<span style="color:#000;font-weight:bold">&gt;</span>[
                            Expanded(
                              <span style="color:#900;font-weight:bold">child:</span> Column(

                                <span style="color:#900;font-weight:bold">children:</span> <span style="color:#000;font-weight:bold">&lt;</span>Widget<span style="color:#000;font-weight:bold">&gt;</span>[
                                  Text(
                                    <span style="color:#d14">&#34;Posts&#34;</span>,
                                    <span style="color:#900;font-weight:bold">style:</span> TextStyle(
                                      <span style="color:#900;font-weight:bold">color:</span> Colors.redAccent,
                                      <span style="color:#900;font-weight:bold">fontSize:</span> <span style="color:#099">22.0</span>,
                                      <span style="color:#900;font-weight:bold">fontWeight:</span> FontWeight.bold,
                                    ),
                                  ),
                                  SizedBox(
                                    <span style="color:#900;font-weight:bold">height:</span> <span style="color:#099">5.0</span>,
                                  ),
                                  Text(
                                    <span style="color:#d14">&#34;5200&#34;</span>,
                                    <span style="color:#900;font-weight:bold">style:</span> TextStyle(
                                      <span style="color:#900;font-weight:bold">fontSize:</span> <span style="color:#099">20.0</span>,
                                      <span style="color:#900;font-weight:bold">color:</span> Colors.pinkAccent,
                                    ),
                                  )
                                ],
                              ),
                            ),
                            Expanded(
                              <span style="color:#900;font-weight:bold">child:</span> Column(

                                <span style="color:#900;font-weight:bold">children:</span> <span style="color:#000;font-weight:bold">&lt;</span>Widget<span style="color:#000;font-weight:bold">&gt;</span>[
                                  Text(
                                    <span style="color:#d14">&#34;Followers&#34;</span>,
                                    <span style="color:#900;font-weight:bold">style:</span> TextStyle(
                                      <span style="color:#900;font-weight:bold">color:</span> Colors.redAccent,
                                      <span style="color:#900;font-weight:bold">fontSize:</span> <span style="color:#099">22.0</span>,
                                      <span style="color:#900;font-weight:bold">fontWeight:</span> FontWeight.bold,
                                    ),
                                  ),
                                  SizedBox(
                                    <span style="color:#900;font-weight:bold">height:</span> <span style="color:#099">5.0</span>,
                                  ),
                                  Text(
                                    <span style="color:#d14">&#34;28.5K&#34;</span>,
                                    <span style="color:#900;font-weight:bold">style:</span> TextStyle(
                                      <span style="color:#900;font-weight:bold">fontSize:</span> <span style="color:#099">20.0</span>,
                                      <span style="color:#900;font-weight:bold">color:</span> Colors.pinkAccent,
                                    ),
                                  )
                                ],
                              ),
                            ),
                            Expanded(
                              <span style="color:#900;font-weight:bold">child:</span> Column(

                                <span style="color:#900;font-weight:bold">children:</span> <span style="color:#000;font-weight:bold">&lt;</span>Widget<span style="color:#000;font-weight:bold">&gt;</span>[
                                  Text(
                                    <span style="color:#d14">&#34;Follow&#34;</span>,
                                    <span style="color:#900;font-weight:bold">style:</span> TextStyle(
                                      <span style="color:#900;font-weight:bold">color:</span> Colors.redAccent,
                                      <span style="color:#900;font-weight:bold">fontSize:</span> <span style="color:#099">22.0</span>,
                                      <span style="color:#900;font-weight:bold">fontWeight:</span> FontWeight.bold,
                                    ),
                                  ),
                                  SizedBox(
                                    <span style="color:#900;font-weight:bold">height:</span> <span style="color:#099">5.0</span>,
                                  ),
                                  Text(
                                    <span style="color:#d14">&#34;1300&#34;</span>,
                                    <span style="color:#900;font-weight:bold">style:</span> TextStyle(
                                      <span style="color:#900;font-weight:bold">fontSize:</span> <span style="color:#099">20.0</span>,
                                      <span style="color:#900;font-weight:bold">color:</span> Colors.pinkAccent,
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
            )
          ),
          Container(
            <span style="color:#900;font-weight:bold">child:</span> Padding(
              <span style="color:#900;font-weight:bold">padding:</span> <span style="color:#000;font-weight:bold">const</span> EdgeInsets.symmetric(<span style="color:#900;font-weight:bold">vertical:</span> <span style="color:#099">30.0</span>,<span style="color:#900;font-weight:bold">horizontal:</span> <span style="color:#099">16.0</span>),
              <span style="color:#900;font-weight:bold">child:</span> Column(
                <span style="color:#900;font-weight:bold">mainAxisAlignment:</span> MainAxisAlignment.center,
                <span style="color:#900;font-weight:bold">crossAxisAlignment:</span> CrossAxisAlignment.start,
                <span style="color:#900;font-weight:bold">children:</span> <span style="color:#000;font-weight:bold">&lt;</span>Widget<span style="color:#000;font-weight:bold">&gt;</span>[
                  Text(
                      <span style="color:#d14">&#34;Bio:&#34;</span>,
                    <span style="color:#900;font-weight:bold">style:</span> TextStyle(
                      <span style="color:#900;font-weight:bold">color:</span> Colors.redAccent,
                      <span style="color:#900;font-weight:bold">fontStyle:</span> FontStyle.normal,
                      <span style="color:#900;font-weight:bold">fontSize:</span> <span style="color:#099">28.0</span>
                    ),
                  ),
                  SizedBox(
                    <span style="color:#900;font-weight:bold">height:</span> <span style="color:#099">10.0</span>,
                  ),
                  Text(<span style="color:#d14">&#39;My name is Alice and I am  a freelance mobile app developper.</span><span style="color:#d14">\n</span><span style="color:#d14">&#39;</span>
                      <span style="color:#d14">&#39;if you need any mobile app for your company then contact me for more informations&#39;</span>,
                    <span style="color:#900;font-weight:bold">style:</span> TextStyle(
                      <span style="color:#900;font-weight:bold">fontSize:</span> <span style="color:#099">22.0</span>,
                      <span style="color:#900;font-weight:bold">fontStyle:</span> FontStyle.italic,
                      <span style="color:#900;font-weight:bold">fontWeight:</span> FontWeight.w300,
                      <span style="color:#900;font-weight:bold">color:</span> Colors.black,
                      <span style="color:#900;font-weight:bold">letterSpacing:</span> <span style="color:#099">2.0</span>,
                    ),
                  ),
                ],
              ),
            ),
          ),
          SizedBox(
            <span style="color:#900;font-weight:bold">height:</span> <span style="color:#099">20.0</span>,
          ),
          Container(
            <span style="color:#900;font-weight:bold">width:</span> <span style="color:#099">300.00</span>,

            <span style="color:#900;font-weight:bold">child:</span> RaisedButton(
              <span style="color:#900;font-weight:bold">onPressed:</span> (){},
              <span style="color:#900;font-weight:bold">shape:</span> RoundedRectangleBorder(
                <span style="color:#900;font-weight:bold">borderRadius:</span> BorderRadius.circular(<span style="color:#099">80.0</span>)
              ),
              <span style="color:#900;font-weight:bold">elevation:</span> <span style="color:#099">0.0</span>,
                <span style="color:#900;font-weight:bold">padding:</span> EdgeInsets.all(<span style="color:#099">0.0</span>),
              <span style="color:#900;font-weight:bold">child:</span> Ink(
                <span style="color:#900;font-weight:bold">decoration:</span> BoxDecoration(
                  <span style="color:#900;font-weight:bold">gradient:</span> LinearGradient(
                    <span style="color:#900;font-weight:bold">begin:</span> Alignment.centerRight,
                    <span style="color:#900;font-weight:bold">end:</span> Alignment.centerLeft,
                    <span style="color:#900;font-weight:bold">colors:</span> [Colors.redAccent,Colors.pinkAccent]
                  ),
                  <span style="color:#900;font-weight:bold">borderRadius:</span> BorderRadius.circular(<span style="color:#099">30.0</span>),
                ),
                <span style="color:#900;font-weight:bold">child:</span> Container(
                  <span style="color:#900;font-weight:bold">constraints:</span> BoxConstraints(<span style="color:#900;font-weight:bold">maxWidth:</span> <span style="color:#099">300.0</span>, <span style="color:#900;font-weight:bold">minHeight:</span> <span style="color:#099">50.0</span>),
                  <span style="color:#900;font-weight:bold">alignment:</span> Alignment.center,
                  <span style="color:#900;font-weight:bold">child:</span> Text(<span style="color:#d14">&#34;Contact me&#34;</span>,
                  <span style="color:#900;font-weight:bold">style:</span> TextStyle(<span style="color:#900;font-weight:bold">color:</span> Colors.white, <span style="color:#900;font-weight:bold">fontSize:</span> <span style="color:#099">26.0</span>, <span style="color:#900;font-weight:bold">fontWeight:</span>FontWeight.w300),
                  ),
                ),
              )
            ),
          ),
        ],
      ),
    );
  }
}

</code></pre></td></tr></table>
</div>
</div></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>Updated on 2021-07-16</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/flutter/">flutter</a>,&nbsp;<a href="/tags/%E4%B8%AA%E4%BA%BA%E8%B5%84%E6%96%99/">个人资料</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">Back</a></span>&nbsp;|&nbsp;<span><a href="/">Home</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/posts/flutter/%E5%9C%A8Flutter%E4%B8%AD%E7%9A%84%E5%BC%80%E5%8F%91%E5%B0%8F%E6%8A%80%E5%B7%A73/" class="prev" rel="prev" title="《在Flutter中的开发小技巧3》"><i class="fas fa-angle-left fa-fw"></i>《在Flutter中的开发小技巧3》</a>
            <a href="/posts/flutter/%E5%9C%A8Flutter%E5%92%8CandroidStudio%E4%B8%AD%E5%88%B6%E4%BD%9C%E7%99%BB%E5%BD%95%E8%A1%A8%E5%8D%95/" class="next" rel="next" title="《在Flutter和androidStudio中制作登录表单》">《在Flutter和androidStudio中制作登录表单》<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
</article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">Powered by <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.79.1">Hugo</a> | Theme - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank">飞雪无情</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="Back to Top">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="View Comments">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><script type="text/javascript" src="/lib/smooth-scroll/smooth-scroll.min.js"></script><script type="text/javascript" src="/lib/lazysizes/lazysizes.min.js"></script><script type="text/javascript" src="/lib/clipboard/clipboard.min.js"></script><script type="text/javascript" src="/lib/sharer/sharer.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"Copy to clipboard","maxShownLines":10},"comment":{}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
